import React, { useState, useEffect } from 'react';
import {
  List,
  Input,
  DatePicker,
  Form,
  ConfigProvider,
  Button,
  Row,
  Col,
  Breadcrumb,
  Spin,
} from 'antd';
import moment from 'moment';
import { SearchOutlined } from '@ant-design/icons';
import zhCN from 'antd/lib/locale/zh_CN';
import { getPolicyLibList } from '@/services/PolicyLib/poblicyLib';
import styles from './index.less';

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const { RangePicker } = DatePicker;

const PolicyLib: React.FC = () => {
  const [policyData, setPolicyData] = useState([]);
  const [searchCondition, setSearchCondition] = useState({});
  const initPagination = { page: 1, size: 20 };
  const [totalCount, setTotalCount] = useState(0);
  const [loading, setLoading] = useState(false);

  const getPolicyList = (params, condition) => {
    setLoading(true);
    getPolicyLibList({ ...params, ...condition })
      .then((resp) => {
        setTotalCount(resp?.totalCount);
        setPolicyData(resp?.results);
        setLoading(false);
      })
      .catch((error) => {
        throw error;
        setLoading(false);
      });
  };

  useEffect(() => {
    getPolicyList(initPagination, searchCondition);
  }, [searchCondition]);

  const onFinish = (values: any) => {
    const { publishDate, title } = values;
    setSearchCondition({
      startTime: publishDate?.length
        ? moment(publishDate[0]).format('YYYY-MM-DD HH:mm:ss')
        : undefined,
      endTime: publishDate?.length
        ? moment(publishDate[1]).format('YYYY-MM-DD HH:mm:ss')
        : undefined,
      title,
    });
  };
  return (
    <ConfigProvider locale={zhCN}>
      <div className={styles.policyLibWrapper}>
        <div className={styles.policyLibTitle}>
          <div className={styles.policyLibTitleMain}>
            <span className={styles.policyLibTitleLeft}>政策库</span>
            <span className={styles.policyLibTitleRight}>/全面囊括政策信息</span>
          </div>
        </div>
        <div className={styles.policyLibMain}>
          <div className={styles.policyLibBreadcrumb}>
            <Breadcrumb separator="">
              <Breadcrumb.Item>您的位置</Breadcrumb.Item>
              <Breadcrumb.Separator>:</Breadcrumb.Separator>
              <Breadcrumb.Item href="">首页</Breadcrumb.Item>
              <Breadcrumb.Separator />
              <Breadcrumb.Item>政策库</Breadcrumb.Item>
            </Breadcrumb>
          </div>
          <div className={styles.policyLibList}>
            <div className={styles.listTitle}>
              <div className={styles.listTitleLeft}>
                <div className={styles.sideShortBar}></div>
                <div className={styles.titleText}>政策列表</div>
              </div>
              <div className={styles.listTitleRight}>
                <Form {...layout} className={styles.listSearchForm} onFinish={onFinish}>
                  <Row>
                    <Col>
                      <Form.Item label="发布时间" name="publishDate">
                        <RangePicker
                          showTime={{
                            hideDisabledOptions: true,
                            defaultValue: [
                              moment('00:00:00', 'HH:mm:ss'),
                              moment('11:59:59', 'HH:mm:ss'),
                            ],
                          }}
                          format="YYYY-MM-DD HH:mm:ss"
                        />
                      </Form.Item>
                    </Col>
                    <Col span={1}></Col>
                    <Col>
                      <Form.Item label="政策名称" name="title">
                        <Input className={styles.SearchInput} placeholder="请输入政策名称" />
                      </Form.Item>
                    </Col>
                    <Col span={2}>
                      <Form.Item>
                        <Button
                          className={styles.SearchInput}
                          type="primary"
                          htmlType="submit"
                          icon={<SearchOutlined />}
                        />
                      </Form.Item>
                    </Col>
                  </Row>
                </Form>
              </div>
            </div>
            <div className={styles.showTotalNum}>共{totalCount}条数据</div>
            <div className={styles.policyLibListContent}>
              <Spin spinning={loading}>
                <List
                  pagination={{
                    defaultPageSize: 20,
                    locale: zhCN,
                    total: totalCount,
                    showSizeChanger: true,
                    showQuickJumper: true,
                    showTotal: (total) => {
                      return `共${total}条数据`;
                    },
                    onChange: (page, pageSize) => {
                      getPolicyList({ page, size: pageSize }, searchCondition);
                    },
                  }}
                  footer={<div className={styles.listFooter}></div>}
                  bordered={false}
                  dataSource={policyData}
                  renderItem={(item) => (
                    <List.Item key={item.id}>
                      <List.Item.Meta
                        title={
                          <div className={styles.listItem}>
                            <a
                              target="_blank"
                              className={styles.listItemTitle}
                              href={item?.fileUrl}
                              title={item.title}
                            >
                              {item.title}
                            </a>
                            <div className={styles.listItemDate}>{item.releaseTime}</div>
                          </div>
                        }
                      />
                    </List.Item>
                  )}
                />
              </Spin>
            </div>
          </div>
        </div>
      </div>
    </ConfigProvider>
  );
};

export default PolicyLib;
